So I'm dealing with a little problem..
I'm trying to modify drag-and-drop code and came across a problem, since I want to have multiple drop areas and one function for all of them.
I have this code:
dropArea.addEventListener("dragover", (event)=>{
event.preventDefault(); //preventing from default behaviour
dropArea.classList.add("activated");
dragText.textContent = "🖐 Release to Upload File";
});
And specified dropareawitth querySelector:
const dropArea = document.querySelector(".drag-area")
Now I need to modify it to work with multiple drop zones. I thought to just replace the "droparea" inside the event to "this" something like that:
this.classList.add("activated");
but it does not work. I even tried:
$(this).classList.add("activated");
Returns this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
Any solutions? I'm stuck...
As your event handler is an arrow function, the value of this is not influenced by the caller, so you cannot use it to get the DOM element. You can use event.target.
event.target.classList.add("activated");
As to your final attempt: $() does not return a DOM element, but an array-like "jQuery" collection object, which doesn't have such properties as classList.